<template>
  <a-date-picker
    v-if="type == 'date'"
    :value="fakeValue"
    v-bind="$attrs"
    style="width: 100%"
    @ok="ok"
    @change="onChange"
  />
  <a-range-picker
    v-else
    :value="fakeValue"
    v-bind="$attrs"
    style="width: 100%"
    @ok="ok"
    @change="onChange"
  />
</template>
<script>
export default {
  // 继承
  name: 'SDatePicker',
  props: {
    modelValue: {
      required: false
    },
    type: {
      type: String,
      required: false,
      default: 'date'
    }
  },
  emits: ['change', 'update:modelValue'],
  data() {
    return { fakeValue: this.modelValue }
  },
  watch: {
    modelValue(val) {
      this.fakeValue = val
    }
  },
  methods: {
    ok(e) {
      if (!this.$attrs.hasOwnProperty('modelValue')) {
        this.fakeValue = e
      }
      this.$emit('update:modelValue', e)
      this.$emit('change', e)
    },
    onChange(e) {
      if (!this.$attrs.hasOwnProperty('modelValue')) {
        this.fakeValue = e
      }
      this.$emit('update:modelValue', e)
      this.$emit('change', e)
    }
  }
}
</script>
